<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:gp="http://gp.componentes.jsf"
      xmlns:c="http://java.sun.com/jsp/jstl/core">  

<ui:composition>

		<link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/componentes/importacoes/fuelux-3.6.3/css/fuelux.min.css"/>
		<link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/componentes/importacoes/bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
		<link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/componentes/wizard/css/wizard.css"/>
		
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/importacoes/jquery-ui-1.11.4.custom/external/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/importacoes/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/importacoes/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/importacoes/fuelux-3.6.3/js/fuelux.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/wizard/js/Wizard.js"></script>
		
		<script type="text/javascript">

			var num = 0;
			var active = 1;
		
		</script>
	
		<div class="thin-box fuelux">
			
			<div class="wizard" data-initialize="wizard" id="#{idWizard}">
										
				<ul class="steps">
						
				</ul>
			
				<div class="actions">
					<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Anterior</button>
					<button class="btn btn-default btn-next" data-last="Complete">Próximo<span class="glyphicon glyphicon-arrow-right"></span></button>
				</div>
						
				<div class="step-content">
					
					<ui:insert></ui:insert>
			
				</div>
				
			</div>
		</div>
		<br/>
		<div class="btn-panel">
			<button type="button" class="btn btn-default" id="btnWizardPrev">Anterior</button>
			<button type="button" class="btn btn-default" id="btnWizardNext">Próximo</button>
			<button type="button" class="btn btn-default" id="btnWizardStep">Index do Step Corrente</button>
			<button type="button" class="btn btn-default" id="btnWizardSetStep">Saltar para o Step 4</button>
			<button type="button" class="btn btn-default" id="btnWizardAddSteps">Adicionar step (setup)</button>
			<button type="button" class="btn btn-default" id="btnWizardRemoveStep">Remover step (preview)</button>
			<button type="button" class="btn btn-default" id="btnWizardDestroy">Destruir e anexar</button>
		</div>
			
			<script type="text/javascript">

				$(".script").remove();
				
				var seletor = '##{idWizard}';
				
				var disablePrevious = #{disablePreviousStep};

				var opt = {
						disablePreviousStep: disablePrevious,  
						selectedItem: {step: active} 

				};
							
				wizard.createWizard(seletor, opt);
				
				$('#btnWizardNext').on('click', function () {
					wizard.next(seletor);
				});
					
				$('#btnWizardPrev').on('click', function () {
					wizard.previous(seletor);
				});
					
				$('#btnWizardDestroy').on('click', function () {
					wizard.destroyWizard(seletor);
				});
								
				$('#btnWizardStep').on('click', function () {
					var item = wizard.selectItem(seletor);
					console.log(item.step);
				});
					
				$('#btnWizardRemoveStep').on('click', function () {
				
					var item = wizard.selectItem(seletor);
					
					wizard.removeSubWizard(seletor, item.step, 1);
					
				});
							
				$('#btnWizardSetStep').on('click', function () {
					wizard.setSelectItem(seletor, 4);
				});
				
				var texto = '<h4>Adicionando conteudo</h4><p>teste</p>';
				var titulo = 'Teste';
					
				$('#btnWizardAddSteps').on('click', function () {
					
					var item = wizard.selectItem(seletor);
					
					var conteudo = [
							{
								badgeVisible: true,
								//badgeClass: 'classePersonalizada',
								badge: '#',
								//stepClass: 'chevron',
								title: titulo,
								pane: texto
							}
					];
				
					wizard.createSubWizard(seletor, conteudo, item.step);
				
				});


				<c:set var="idWizard" value="" />
				<c:set var="disablePreviousStep" value="" />
			
			</script>
      	
      	</ui:composition>
</html>
